<template>
  <div>
    <div>{{ message }}</div>
    <button @click="generateResponse">Generate Response</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '', // 存储显示的消息
      response: '', // 存储 ChatGPT API 的响应
      index: 0, // 当前需要显示的字符索引
    };
  },
  methods: {
    async generateResponse() {
      const url = 'https://api.openai.com/v1/chat/completions';
      const data = {
        model: "gpt-3.5-turbo",
        messages: [
          {
            role: "user",
            content: "如何在vue中调用openai，并将回答返回到message字段中，请写出代码"
          }
        ],
        "temperature": 0.7
      };
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer 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', // 替换成自己的 API key
      };
      this.response = await axios.post(url, data, { headers: headers });
      this.index = 0; // 重置字符索引
      this.message = ''; // 清空显示的消息
      this.message = this.response.data.choices[0].message.content;
    },
  },
};
</script>
